<template>
	<!-- <view class="search">此处是搜索框</view> -->
	<view class="allBack">
		<top-blank class="topBlank"></top-blank>
		<view class="Tab">
			<base-tab class="topbar" :tabIndex="tabIndex" :tabList="tabList" @changeTab="changeTab"></base-tab>
			<!-- 在这里添加显示不同标签内容的部分 -->

			<view class="content" v-for="(item,index) in tabListLength">
				<view v-show="tabIndex === index">
					<view class="common-style">
						<view v-for="(item,index) in showAccessories">
							<view v-show="item.systemName == clickLabel">
								<universal-item-ccessories :ccessoriesName="item.name" :price="item.price">
								</universal-item-ccessories>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
    import { getAllSystemList, getSystemAccessories } from "@/api/accessoriesApi.js"; // 引入封装的请求函数

    export default {
        data() {
            return {
                tabIndex: 0,
                tabList: [{//给个默认值，以免没有数据的时候报错
					label:"",
					index:0
				}],
                tabListLength: 0,
                page: 0,
                showAccessories: [],
                clickLabel: ''
            };
        },
        methods: {
            changeTab(index) {
                this.tabIndex = index;
                this.clickLabel = this.tabList[index].label;
                this.onLoadClickSystemDatas(this.page, this.clickLabel);
            },
            async onLoadAllSystemList() {
                try {
                    const data = await getAllSystemList();
                    this.tabListLength = data.length;
                    this.tabList = data.map((item, index) => ({
                        label: item.name,
                        index: index,
                    }));
                } catch (err) {
                    console.log("请求失败", err);
					uni.showToast({
						title:"服务器罢工了",
						image: '/static/image/icon/Disconnected.png',
						duration:2000
					})
                }
            },
            async onLoadClickSystemDatas(page, label) {
                try {
                    const accessories = await getSystemAccessories(page, label);
                    this.showAccessories = accessories;
                } catch (err) {
                    console.log("请求失败", err);
					uni.showToast({
						title:"服务器罢工了",
						image: '/static/image/icon/Disconnected.png',
						duration:2000
					})
                }
            },
        },
        async onLoad() {
			const userData = uni.getStorageSync('userData');
			console.log("user登录记录", userData); // 输出: user登录记录
			
			if (userData.role != 'user') {
				uni.showToast({
					duration: 2000,
					title: "您不是用户，无法访问！",
					icon: 'none',
					mask: "true"
				})
			
				setTimeout(function() {
					uni.redirectTo({
						url: '/pages/login/login'
					})
				}, 2000); // 1000毫秒等于1秒钟
			
				return;
			}
            await this.onLoadAllSystemList();
            this.changeTab(0);
        },
    };
</script>




<style lang="scss">
	page {
		background-color: #333333;
	}

	.allBack {
		.topBlank {
			position: fixed;
			top: 0;
			left: 0;
		}

		.topbar {
			position: fixed;
			top: 90rpx;
			left: 0;
		}

		.content {
			padding-top: 10rpx;

			.common-style {
				margin: 150rpx 0 50rpx;
				// border: 1px solid blue;
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				/* 换行 */
			}
		}
	}
</style>
